<div class="apes-technical-review">

  <!--效率统计-->
  <apes-card apesTitle="效率统计">

    <!--查询区-->
    <div apes-row [apesGutter]="16" class="apes-item" style="padding: 16px;">
      <formly-form [model]="efficiencyModel" [fields]="efficiencyField"></formly-form>
      <div apes-col [apesSpan]="4">
        <button apes-button [apesSize]="'default'" (click)="refreshEfficiencyData()">刷新</button>
      </div>
    </div>

    <!--展示区-->
    <div apes-row [apesGutter]="16">
      <div apes-col [apesSpan]="24">
        <apes-charts [id]="'efficiency'" [data]="efficiencyData" [option]="efficiencyOption"
                     [loading]="efficiencyLoading"></apes-charts>
      </div>
    </div>

  </apes-card>

  <!--月度贡献榜-->
  <apes-card apesTitle="月度贡献榜">

    <!--查询区-->
    <div apes-row [apesGutter]="16" class="apes-item" style="padding: 16px;">
      <formly-form [model]="staffModel" [fields]="staffField"></formly-form>
      <div apes-col [apesSpan]="4">
        <button apes-button [apesSize]="'default'" (click)="refreshStaffData()">刷新</button>
      </div>
    </div>

    <!--展示区-->
    <div apes-row [apesGutter]="16" apesType="flex" apesJustify="center">
      <div apes-col [apesSpan]="12">

        <apes-table #staffTable
                    apesBordered
                    apesSize="small"
                    [apesScroll]="{ y: '500px' }"
                    [apesFrontPagination]="false"
                    [apesShowPagination]="false"
                    [apesLoading]="staffLoading"
                    [apesData]="staffData">
          <thead>
          <tr>
            <th style='width: 15%' [apesAlign]="'center'">岗位</th>
            <th style='width: 10%' [apesAlign]="'center'">员工</th>
            <th style='width: 25%' colspan="2" class="colspan">
              <span>平均耗时</span>
              <span>较上一个月</span>
            </th>
            <th style='width: 25%' colspan="2" class="colspan">
              <span>超时单量</span>
              <span>较上一个月</span>
            </th>
            <th style='width: 25%' colspan="2" class="colspan">
              <span>总单量</span>
              <span>较上一个月</span>
            </th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of staffTable.data">
            <td style='width: 15%' [apesAlign]="'center'">{{data.WORKLOCATION}}</td>
            <td style='width: 10%' [apesAlign]="'center'">{{data.EXECUTOR_NAME}}</td>
            <td style='width: 12.5%' [apesAlign]="'left'">{{data.TIME}}分钟</td>
            <td style='width: 12.5%' [apesAlign]="'right'"
                [ngClass]="showStaffClass(data.L_TIME,data.TIME)">
              <span *ngIf="showStaffClass(data.L_TIME,data.TIME) == 'showUp'">
                <i apes-icon apesType="arrow-up"></i>
              </span>
              <span *ngIf="showStaffClass(data.L_TIME,data.TIME) == 'showDown'">
                <i apes-icon apesType="arrow-down"></i>
              </span>
              <span>{{showStaffText(data.L_TIME,data.TIME)}}分钟</span>
            </td>
            <td style='width: 12.5%' [apesAlign]="'left'">{{data.B_MOUNT}}单</td>
            <td style='width: 12.5%' [apesAlign]="'right'" [ngClass]="showStaffClass(data.L_B_MOUNT,data.B_MOUNT)">
              <span *ngIf="showStaffClass(data.L_B_MOUNT,data.B_MOUNT) == 'showUp'">
                <i apes-icon apesType="arrow-up"></i>
              </span>
              <span *ngIf="showStaffClass(data.L_B_MOUNT,data.B_MOUNT) == 'showDown'">
                <i apes-icon apesType="arrow-down"></i>
              </span>
              <span>{{showStaffText(data.L_B_MOUNT,data.B_MOUNT)}}</span>
            </td>
            <td style='width: 12.5%' [apesAlign]="'left'">{{data.AMOUNT}}单</td>
            <td style='width: 12.5%' [apesAlign]="'right'" [ngClass]="showStaffClass(data.L_AMOUNT,data.AMOUNT)">
              <span *ngIf="showStaffClass(data.L_AMOUNT,data.AMOUNT) == 'showUp'">
                <i apes-icon apesType="arrow-up"></i>
              </span>
              <span *ngIf="showStaffClass(data.L_AMOUNT,data.AMOUNT) == 'showDown'">
                <i apes-icon apesType="arrow-down"></i>
              </span>
              <span>{{showStaffText(data.L_AMOUNT,data.AMOUNT)}}</span>
            </td>
          </tr>
          </tbody>
        </apes-table>

      </div>
    </div>

  </apes-card>

  <!--贡献漏斗统计-->
  <apes-card apesTitle="贡献漏斗统计">

    <!--查询区-->
    <div apes-row [apesGutter]="16" class="apes-item" style="padding: 16px;">
      <formly-form [model]="contributionModel" [fields]="contributionField"></formly-form>
      <div apes-col [apesSpan]="4">
        <button apes-button [apesSize]="'default'" (click)="refreshContributionData()">刷新</button>
      </div>
    </div>

    <!--展示区-->
    <div apes-row [apesGutter]="16" apesType="flex" apesJustify="center">

      <div apes-col [apesSpan]="8">
        <apes-list apesBordered
                   [apesHeader]="contributionHeader"
                   [apesLoading]="contributionLoading">
          <ng-template #contributionHeader>
            <div class="contribution-list">
              <div style="width: 50px; text-align: center;">总单数</div>
              <div style="width: 150px; text-align: center;">总金额</div>
              <div style="width: 100px; text-align: center;">单量转化率</div>
            </div>
<!--            <div class="contribution-list-img"></div>-->
          </ng-template>
          <apes-list-item *ngFor="let item of contributionData;let i =index;" style="height: 65px;">
            <div class="contribution-list">
              <div style="width: 50px; text-align: center;">{{item.AMOUNT}}</div>
              <div style="width: 150px; text-align: center;">{{item.MONEY}}</div>
              <div style="width: 100px; text-align: center;">{{showPercentage(item.AMOUNT,contributionData,i)}}</div>
            </div>
<!--            <div class="contribution-list-funnel">-->
<!--              <div class="contribution-list-funnel-text">{{item.TITLE}}</div>-->
<!--            </div>-->
          </apes-list-item>
        </apes-list>
      </div>

      <div apes-col [apesSpan]="10">
        <apes-charts [id]="'contribution'" [option]="contributionOption"></apes-charts>
      </div>

    </div>

  </apes-card>

  <!--转化统计-->
  <apes-card apesTitle="转化统计">

    <!--查询区-->
    <div apes-row [apesGutter]="16" class="apes-item" style="padding: 16px;">
      <formly-form [model]="conversionModel" [fields]="conversionField"></formly-form>
      <div apes-col [apesSpan]="4">
        <button apes-button [apesSize]="'default'" (click)="refreshConversionData()">刷新</button>
      </div>
    </div>

    <!--展示区-->
    <div apes-row [apesGutter]="16">
      <div apes-col [apesSpan]="12">
        <apes-charts [id]="'conversion'" [data]="conversionData" [option]="conversionOption"
                     [loading]="conversionLoading"></apes-charts>
      </div>

      <div apes-col [apesSpan]="12">
        <apes-charts [id]="'amount'" [data]="amountData" [option]="amountOption"
                     [loading]="amountLoading"></apes-charts>
      </div>
    </div>

  </apes-card>

  <!--退回统计-->
  <apes-card apesTitle="退回统计">

    <!--查询区-->
    <div apes-row [apesGutter]="16" class="apes-item" style="padding: 16px;">
      <formly-form [model]="returnModel" [fields]="returnField"></formly-form>
      <div apes-col [apesSpan]="2">
        <button apes-button [apesSize]="'default'" (click)="refreshReturnData()">刷新</button>
      </div>
      <div apes-col [apesSpan]="2">
        <button apes-button [apesSize]="'default'" (click)="openDialog()">退回详情</button>
      </div>
    </div>

    <!--展示区-->
    <div apes-row [apesGutter]="16">
      <div apes-col [apesSpan]="24">
        <apes-charts [id]="'return'" [data]="returnData" [option]="returnOption"
                     [loading]="returnLoading"></apes-charts>
      </div>
    </div>

  </apes-card>

</div>


